<template>
	<div>
		<!-- 提交评论数据 -->
		<div id="postcomment">
			<h3>提交评论</h3>
			<p class="p"></p>
			<textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea>
			<mt-button type="primary" size="large" @click='postcomment'>发表</mt-button>
		</div>
		<!-- 获取评论数据列表 -->
		<div id="list">
			<h3>评论列表</h3>
			<p class="p"></p>
			<div v-for="(item,index) in list">
				<div class="title">
					<span>第{{index + 1}}楼</span>
					<span>用户：{{item.user_name}}</span>
					<span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
				</div>
				<ul class="mui-table-view">
                    <li class="mui-table-view-cell" v-text="item.content"></li>
                </ul>
			</div>
		</div>
		<!-- 加载更多 -->
		<mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
	</div>
</template>

<script>
	export default{
		props:['id'],
		data(){
			return {
				postcontent:'', //用来获取用户输入的评论
				list:[], //用来存放评论数据
				pageindex:1 //分页的页码
			}
		},
		created(){
			this.getcommentlist(this.pageindex);
		},
		methods:{
			//评论数据的提交
			postcomment:function() {
				//判断用户是否输入了评论内容
				//trim()出去字符串首尾的空白字符
				if(this.postcontent.trim().length <= 0){
					this.common.Toast('评论的内容不能为空');
					return;
				}
				//确定提交数据的地址
				var url = this.common.apidomain+'/api/postcomment/'+this.id;
				//获取用户在文本框中输入的评论内容
				this.$http.post(url,{content:this.postcontent},{emulateJSON: true}).then(function(response){
					//提示评论添加成功
					this.common.Toast(response.body.message);
					//将最新评论的数据插入到评论列表的最前面
					
					/*this.list.unshift({'user_name':'匿名用户',
						'add_time':new Date(),
						'content':this.postcontent});*/
					this.list = [{
	                    "user_name": "匿名用户",
	                    "add_time": new Date(),
	                    "content": this.postcontent
                	}].concat(this.list);
					//清空文本框中的评论内容
					this.postcontent = '';
				});
			},
			//获取评论数据
			getcommentlist:function(pageindex){
				//获取分页的页码
				pageindex = pageindex || 1;
				//确定请求数据地址
				var url = this.common.apidomain+'/api/getcomments/'+this.id+'?pageindex='+pageindex;
				//发送ajax请求
				this.$http.get(url).then(function(response){
					//数据请求失败处理
					if(response.body.status != 0){
						this.common.Toast(response.body.message);
						return;
					}
					//将数据添加到列表中
					this.list.push.apply(this.list,response.body.message);
					/*this.list = this.list.concat(response.body.message);*/
				});
			},
			getmore:function(){
				this.pageindex++;
				this.getcommentlist(this.pageindex);
			}
		}

	}
</script>

<style scoped>
	/* 1.0 实现提交评论样式 */

	#postcomment {
	    padding: 5px;
	}

	.p {
	    height: 1px;
	    width: 100%;
	    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	}


	/*2.0 评论列表的样式*/

	#list {
	    padding: 5px;
	}

	.title {
	    padding: 5px;
	    color: #6d6d72;
	    font-size: 15px;
	    background-color: rgba(0, 0, 0, 0.1);
	}
</style>